<template>
  <div class="subject-chart">
    <!-- 头部 -->
    <div class="header">
      <span>试题学科分布</span>
      <i class="el-icon-warning"></i>
    </div>
    <!-- 内容 -->
    <div class="chart">
      <div class="subChart" ref="subjectChart"></div>
    </div>
    <div class="hr"></div>
    <!-- 底部 -->
    <div class="footer">
      <span>前端试题数量</span>
      <span class="number">5,234</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 试题学科分布数据
      subject: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80'],
        series: [
          {
            name: '学科分布',
            type: 'pie',
            radius: [15, 60],
            center: ['50%', '50%'],
            roseType: 'radius',
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: 320, name: '前端' },
              { value: 240, name: 'java' },
              { value: 149, name: 'python' },
              { value: 100, name: 'c++' },
              { value: 59, name: 'UI' }
            ],
            labelLine: {
              normal: {
                length: 10,
                length2: 10
              }
            }
          }
        ]
      }
    }
  },
  created() {},
  mounted() {
    this.getMyCheart()
  },
  methods: {
    async getMyCheart() {
      const subjectChart = this.$refs.subjectChart
      if (subjectChart) {
        // 基于准备好的dom，初始化echarts实例
        const myChart = this.$echarts.init(subjectChart)
        // 展示数据
        myChart.setOption(this.subject)
        window.addEventListener('resize', function() {
          myChart.resize()
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.subject-chart {
  display: flex;
  flex-direction: column;
  .chart {
    position: relative;
    height: 160px;
    .subChart {
      position: relative;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
